<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>查看相册</title>
  <link rel="stylesheet" href="./src/css/main-albummake.css">
  
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  
  <script>
    axios.defaults.baseURL = "https://<YOUAPPID>.lafyun.com";
  </script>
</head>
<body>
  <div id="app">
    <router-view></router-view>
  </div>

  <div id="main" style="display: none;">
    <iframe ref="mainIframe" class="mainIframe" frameborder="0" :src="templateIndex"></iframe>
    <div @click="switchsound()" class="soundImage">
      <img src="./src/image/music_note_big.png" ref="soundImage" class="soundImageTurn">
    </div>
    <div onclick="location.href='./index.html';" class="back" v-show="showBack">返回</div>
    <audio :src="musicUrl" ref="musicPlay" autoplay="autoplay" loop="true"></audio>
  </div>

  <script>
    const Main = {
      template: document.querySelector("#main").innerHTML,
      data() {  //数据
        return {
          albumId: "",
          albumName: "",
          templateIndex: "",
          musicUrl: "",
          //显示
          showBack: true,
        }
      },
      mounted: function () {  // 打开页面时执行
        if (localStorage.getItem("access_token") != null) {
          this.showBack = true;
        }
        this.albumId = this.$route.params.albumId;

        this.getAlbumInfo()
      },
      methods: {
        getAlbumInfo: function(){
          const that = this;
          axios({
              url: '/albumapi-show-albumdata',
              method: 'post',
              data: {
                albumId: this.albumId,
              },
            })
            .then(function (e) {
              if (e.data.code==200){
                document.title = e.data.data.albumName + " - 查看相册";
                that.albumName = e.data.data.albumName;
                that.musicUrl = e.data.data.musicUrl;
                //拼接请求链接
                var photoRequestHost = axios.defaults.baseURL+"/albumapi-show-photo-get";
                that.templateIndex = e.data.data.templateIndex + "?requestHost=" + photoRequestHost + "&albumName=" + that.albumName + "&albumId=" + that.albumId;

                return;
              }
              alert("没有此相册！");
              location.href='./index.html';
            })
        },
        switchsound: function(){
          const musicPlay = this.$refs.musicPlay;
          const soundImage = this.$refs.soundImage;
          if(musicPlay.paused){
            soundImage.classList.add("soundImageTurn")
            musicPlay.play();
          } else {
            soundImage.classList.remove("soundImageTurn")
            musicPlay.pause();
          }
        },
      }

    }

    
    var phoneScale = parseInt(window.screen.width)/500;
    document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> '); 
    //路由
    const routes = [
      { path: '/:albumId/', name: "main", component: Main },
    ]
    //创建 router
    const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes,
    })
    //创建VueApp 挂载路径
    const app = Vue.createApp({})
    app.use(router)
    app.mount('#app')
  </script>
</body>
</html>